<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据统计</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="./echarts.min.js"></script>
</head>

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['', '', '', '', '', '', ''],
                    axisTick: {
                        alignWithLabel: true,
                        show: false //y轴坐标点消失
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitLine: {
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: 'Direc1t',
                    type: 'bar',
                    barWidth: '15%',
                    itemStyle: {
                        normal: {
                            color: 'green',
                            barBorderRadius: [15, 15, 15, 15],
                            opacity: 0.7,
                        }

                    },
                    data: [58, 52, 200, 334, 390, 330, 220],
                    markPoint: {
                        symbol: 'pin',//标记类型
                        symbolSize: 30,//图形大小
                        itemStyle: {
                            normal: {
                                borderColor: '#fff',
                                borderWidth: 1,            // 标注边线线宽，单位px，默认为1
                                label: {
                                    show: true,
                                    textStyle: {
                                        // color: 'black',
                                        fontSize: 7
                                    }
                                }
                            }
                        },
                        data: [//配置项
                            { value: '58', xAxis: 0, yAxis: 58 },
                            { value: '52', xAxis: 1, yAxis: 52 },
                            { value: '200', xAxis: 2, yAxis: 200 },
                            { value: '334', xAxis: 3, yAxis: 334 },
                            { value: '390', xAxis: 4, yAxis: 390 },
                            { value: '330', xAxis: 5, yAxis: 330 },
                            { value: '220', xAxis: 6, yAxis: 220 },
                        ]
                    },

                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>